<template>
  <div class="base_form">
    <FormModel
      ref="baseInfoForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :disabled="editType === 3"
    >
      <FormModelItem label="流程名称" prop="fullName">
        <Input v-model="form.fullName" placeholder="请输入流程名称" :disabled="disabled"/>
      </FormModelItem>
      <FormModelItem label="流程编码" prop="enCode">
        <Input v-model="form.enCode" placeholder="请输入流程编码" :disabled="disabled"/>
      </FormModelItem>
      <FormModelItem label="流程分类" prop="category">
        <Select v-model="form.category" placeholder="请选择流程分类" :disabled="disabled">
          <SelectOption value="1">费用相关</SelectOption>
          <SelectOption value="2">仓库管理</SelectOption>
          <SelectOption value="3">人事管理</SelectOption>
          <SelectOption value="4">项目管理</SelectOption>
          <SelectOption value="5">销售管理</SelectOption>
          <SelectOption value="6">日常工作</SelectOption>
          <SelectOption value="7">服务支持</SelectOption>
          <SelectOption value="8">资产管理</SelectOption>
          <SelectOption value="9">车辆管理</SelectOption>
          <SelectOption value="10">行政管理</SelectOption>
          <SelectOption value="11">合同管理</SelectOption>
          <SelectOption value="12">公文管理</SelectOption>
          <SelectOption value="13">CRM应用</SelectOption>
        </Select>
      </FormModelItem>
      <FormModelItem label="流程类型" prop="type">
        <Select v-model="form.type" disabled >
          <SelectOption value="1">发起流程</SelectOption>
        </Select></FormModelItem
      >
      <!-- <FormModelItem label="流程图标" prop="icon">
        <Input v-model="form.icon" />
      </FormModelItem> -->
      <FormModelItem label="表单类型" prop="formType">
        <Select v-model="form.formType" disabled>
          <SelectOption :value="0">系统表单</SelectOption>
          <SelectOption :value="1">自定义表单</SelectOption>
        </Select>
      </FormModelItem>
      <FormModelItem label="Web地址" prop="formUrl">
        <Input
          addon-before="@views"
          v-model="form.formUrl"
          placeholder="请输入Web地址"
          :disabled="disabled"
        />
      </FormModelItem>
      <FormModelItem label="App地址" prop="appFormUrl">
        <Input v-model="form.appFormUrl" placeholder="请输入App地址" :disabled="disabled"/>
      </FormModelItem>
      <FormModelItem label="排序" prop="sortCode">
        <InpurNumber :min="0" v-model="form.sortCode" placeholder="请排序" :disabled="disabled"/>
      </FormModelItem>
      <FormModelItem label="状态" prop="visibleType">
        <A_Switch v-model="form.visibleType" :disabled="disabled"/>
      </FormModelItem>
      <FormModelItem label="流程说明" prop="description">
        <TextArea
        :disabled="disabled"
          v-model="form.description"
          placeholder="请输入说明"
          :auto-size="{ minRows: 3, maxRows: 5 }"
      /></FormModelItem>
    </FormModel>
  </div>
</template>

<script>
import Input from "ant-design-vue/lib/input";
import Form from "ant-design-vue/lib/form";
import FormModel from "ant-design-vue/lib/form-model";
import Select from "ant-design-vue/lib/select";
import InpurNumber from "ant-design-vue/lib/input-number";
import A_Switch from "ant-design-vue/lib/switch/index";
import TextArea from "ant-design-vue/lib/input/TextArea";

import "ant-design-vue/lib/input/style/css";
import "ant-design-vue/lib/form/style/css";
import "ant-design-vue/lib/form-model/style/css";
import "ant-design-vue/lib/select/style/css";
import "ant-design-vue/lib/input-number/style/css";
import "ant-design-vue/lib/switch/style/css";

const SelectOption = Select.Option;
const FormModelItem = FormModel.Item;

const rules = {
  fullName: [{ required: true, message: "请输入流程名称", trigger: "blur" }],
  enCode: [{ required: true, message: "请输入流程编码", trigger: "blur" }],
  type: [{ required: true, message: "请选择流程分类", trigger: "change" }],
  category: [{ required: true, message: "请选择流程类型", trigger: "change" }],
  formType: [{ required: true, message: "请选择表单类型", trigger: "change" }],
};
export default {
  components: {
    Input,
    FormModel,
    Form,
    FormModelItem,
    Select,
    SelectOption,
    InpurNumber,
    A_Switch,
    TextArea,
  },
  props: {
    data: Object,
    editType: Number,
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      form:
        this.editType === 1
          ? { fullName: "", formType: 0, type: "1", sortCode: 0 }
          : this.data,
      rules,
    };
  },

  computed: {
    disabled() {
      return this.editType === 3;
    },
  },
  methods: {
    verify() {
      if (this.$refs.baseInfoForm) {
        return this.$refs.baseInfoForm.validate();
      }
      return null;
    },
    getData() {
      return JSON.parse(JSON.stringify(this.form));
    },
  },
};
</script>

<style scoped>
.base_form {
  width: 800px;
  padding: 16px;
  background: #fff;
  margin: 0 auto;
  border-radius: 5px;
}
</style>